<nav class="navbar navbar-expand-xl bg-secondary navbar-dark fixed-top">
    <a class="navbar-brand  pr-3" href="index.html">CoderYX</a>
    <ul class="navbar-nav">
        <li class="nav-item  pr-3">
            <a class="nav-link" href="apps.html">应用</a>
        </li>
        <li class="nav-item  pr-3">
            <a class="nav-link" href="games.html">游戏</a>
        </li>
        <li class="nav-item  pr-3">
            <a class="nav-link" href="blogs.html">博客</a>
        </li>
        <li class="nav-item  pr-3">
            <a class="nav-link" href="http://blog.csdn.net/qq_34731703" target="_blank">CSDN</a>
        </li>
        <li class="nav-item  pr-3">
            <a class="nav-link" href="https://15310320305.github.io/" target="_blank">GitBlog</a>
        </li>
        <li class="nav-item  pr-3">
            <a class="nav-link" href="about.html">关于</a>
        </li>
    </ul>
    <div class="collapse navbar-collapse justify-content-end" id="navbar_right">
        <ul class="navbar-nav" id="login_register" style="display: ;">

            <li class="nav-item   pr-3" id="navMainPage">
                <a class="nav-link" data-toggle="modal" data-target="#login" href=""><span
                        class="glyphicon glyphicon-log-in"></span> 登录 </a>
            </li>
            <li class="nav-item   pr-3" id="navTechPage">
                <a class="nav-link" data-toggle="modal" data-target="#register" href=""> <span
                        class="glyphicon glyphicon-user"></span>注册 </a>
            </li>
        </ul>

        <ul class="navbar-nav" id="user_logout" style="display:none ;">

            <li class="nav-item   pr-3" id="navMainPage">
                <a id="nickname" class="nav-link" href="#" style=""> Name </a>
            </li>
            <li class="nav-item   pr-3" id="navTechPage">
                <a class="nav-link" href="#"><span class="glyphicon glyphicon-log-in"></span> 注销 </a>
            </li>
        </ul>
    </div>
</nav>
<!-- 注册窗口 -->
<div id="register" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">注册</h1>
            </div>
            <div class="modal-body">
                <form class="form-group" action="">
                    <div class="form-group">
                        <label for="">用户名</label>
                        <input class="form-control" type="text" placeholder="6-15位字母或数字">
                    </div>
                    <div class="form-group">
                        <label for="">密码</label>
                        <input class="form-control" type="password" placeholder="至少6位字母或数字">
                    </div>
                    <div class="form-group">
                        <label for="">再次输入密码</label>
                        <input class="form-control" type="password" placeholder="至少6位字母或数字">
                    </div>
                    <div class="form-group">
                        <label for="">邮箱</label>
                        <input class="form-control" type="email" placeholder="例如:123@123.com">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="submit">提交</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 登录窗口 -->
<div id="login" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">登录</h1>
            </div>
            <div class="modal-body">
                <form class="form-group" action="">
                    <div class="form-group">
                        <label for="">用户名</label>
                        <input id="username" class="form-control" type="text" placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="">密码</label>
                        <input id="password" class="form-control" type="password" placeholder="">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="submit">登录</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            type: "post",
            url: "/usr/login",
            async: true,
            data: {
                username: username,
                password: password
            },
            dataType: "json",
            success: function (data) {
                $("#login_register").css("display", "none");
                $("#user_logout").css("dis").css("display", "");
                $("#nickname").val(data.data.nickname);
            }
        });

    })


</script>
